import React, {Component} from 'react';

import styles from './UserGift.css';
import {Link} from "react-router-dom";

import UserService from "../../business/user/UserService";
import {PointsDomain} from "../../business/point/PointsDomain";
import {Table} from "antd";


class UserGift extends Component{
  constructor(props){
    super(props);
    this.state={
      orderGift:[],
    }
    this.handleChange = this.handleChange.bind(this);
    this.callBackQueryList = this.callBackQueryList.bind(this);
    this.userService = new UserService();
  }
  columns = [{
    title: '支付时间',
    dataIndex: 'payTime',
    key: 'payTime',
    width:200,
    fixed: 'left',
    render: text => <a href="javascript:;">{text}</a>,
  }, {
    title: '礼物名称',
    dataIndex: 'goodsImageName',
    key: 'goodsImageName',
    className: 'goodsImageName',
    width:200,
    fixed: 'left',
    render:(text,record)=>{
      return record.goodsName;
    }
  }, {
    title: '数量',
    dataIndex: 'quantity',
    key: 'quantity',
  }, {
    title: '消耗积分',
    dataIndex: 'totalPoints',
    key: 'totalPoints',
  }, {
    title: '用户留言',
    dataIndex: 'userMessage',
    key: 'userMessage',
  }, {
    title: '发货留言',
    dataIndex: 'shipMessage',
    key: 'shipMessage',
  }, {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    render:(text,record)=>{
      if(text ==0){
          return "备货中";
      }else if(text ==1){
        return "已发货";
      }else if(text ==2){
        return "完成";
      }else if(text ==3){
        return "取消";
      }
    }
  }];

  handleChange(event) {
    this.setState({ [event.target.name] : event.target.value});
  }

  userService:UserService;

  componentDidMount(){
    console.info("giftPage htpp start");
    let loginToken = sessionStorage.getItem("loginToken");

    let data ={
      username:sessionStorage.getItem('username')
    };
    this.userService.queryUserOrder(data,loginToken,this.callBackQueryList);
  }

  callBackQueryList(order,isSuccess){
    console.log(order);
    if(isSuccess){
      this.setState({orderGift: order.data.dataList});
    }
  }

  giftNum(){
    let orderGift =this.state==null?undefined: this.state["orderGift"];
    if(orderGift == undefined){
      return 0;
    }else{
      let count = 0;
      orderGift.forEach(value=>{
        count += value.quantity;
      });
      return count;
    }
  }

  orderState(order){
    if(order.status ==0){
      return "备货中";
    }else if(order.status ==1){
      return "已发货";
    }else if(order.status ==2){
      return "完成";
    }else if(order.status ==3){
      return "取消";
    }
}

  show(){
    let order =this.state==null?undefined: this.state["orderGift"];
    if(order == undefined){
      return ;
    }else{
      // @ts-ignore
      return (<Table columns={this.columns} dataSource={order}
                     bordered rowKey={list=>list.orderSn}
                     pagination={{
                       pageSize: 5,
                       defaultPageSize:5,
                       total:order.length,
                     }}
                     scroll={{x:1200}} />);
  }

  }

  giftDetail(){
    let orderGift =this.state==null?undefined: this.state["orderGift"];
    if(orderGift == undefined){
      return ;
    }else{
      if(orderGift.length == 0){
        return;
      }else{
        return (<tbody>{
            orderGift.map((order,index)=>{
              return  (
                <tr key={index}>
                  <td>{order.payTime}</td>
                  <td>
                    <div className={styles.table_pic}>
                      <img src={process.env.POINT_SHOPPING_URL+"/point-shopping/goods/show/"+order.goodsImageName} alt=""/>
                    </div>
                    <div className={styles.table_name}>
                      <a href="user-shop-detail.html">{order.goodsName}</a>
                    </div>
                  </td>
                  <td>{order.quantity}个</td>
                  <td className={styles["colortips-orange"]}>{order.totalPoints}</td>
                  <td>{this.orderState(order)}</td>
                </tr>
              )
            })
        }</tbody>);
      }
    }
  }
  showPageNum(pointList:PointsDomain[]){
    if(pointList.length !=1000000){
      return '';
    }else{
      return (
        <div className={styles["mod-pageflip"]}>
          <ul>
            <li className={styles.pageflip_prev}>
              <a href="#">上一页</a>
            </li>
            <li className={styles["pageflip_pagenum-active"]}><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
            <li className={styles.pageflip_dot}>...</li>
            <li><a href="">10</a></li>
            <li className={styles.pageflip_next}>
              <a href="#">下一页</a>
            </li>
          </ul>
        </div>
      );
    }
  }

  render() {
    return (
      <div className={styles.user_body}>
        <div className={styles.body_header}>
          <div className={styles.header_shop}>
            <div className={styles.shop_pic}><i></i></div>
            <div className={styles["shop_info-1"]}>
              <p className={styles["info-1_shop"]}>
                <span className={styles["shop_text"]}>我的所有礼品</span>
                <span className={styles.shop_gift}>
                <span className={styles.gift_num}>{this.giftNum()}</span>
                个
              </span>
              </p>
            </div>
            {/*<Link className={[styles["mod-btn"],styles["mod-btn-black"]].join(' ')} to="/point-shopping">工作人员</Link>
            <span className={styles.shop_tips}>礼品出问题了?</span>*/}
          </div>
        </div>
        <div className={styles.body_content}>
          <div className={styles["mod-sheet"]}>
            <div className={styles.sheet_header}>
              <p className={styles.header_title}>我的礼品</p>
              <div className={styles.header_sift}>
                {this.show()}
                {/*<div className={styles.sift_select}>
                  <select name="" id="select-type">
                    <option value="0">所有记录</option>
                    <option value="1">我兑换的</option>
                    <option value="2">赠送我的</option>
                  </select>
                </div>
                <div className={styles["mod-form-search"]}>
                  <input id="prize-search" className={styles["form-search_input"]} type="text" placeholder="搜索礼品名称" value="" onChange={this.handleChange}/>
                  <input id="prize-search-btn" className={styles["form-search_submit"]} type="button" value=""/>
                </div>*/}
              </div>
            </div>
            <div className={styles.sheet_body}>
              {/*<table className={styles.body_table}>
                <thead>
                <tr>
                  <th className={styles["th-5"]}>时间</th>
                  <th className={styles["th-1"]}>礼品名称</th>
                  <th className={styles["th-2"]}>数量</th>
                  <th className={styles["th-3"]}>消耗积分</th>
                  <th className={styles["th-4"]}>状态</th>
                </tr>
                </thead>
                {this.giftDetail()}
              </table>*/}
            </div>

          </div>
        </div>
      </div>
    );
  }
}
export default UserGift
